<%@ include file="/WEB-INF/views/include.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
	$(document).ready(function() {

		$("#formProduct").validate({
			messages : {
				name : {
					required : "<fmt:message key="generic.noName" />",
					minlength : "<fmt:message key="generic.tagTooShort" />",

				}
			}
		});

	});

	$.fn.addItems = function(data) {
		return this.each(function() {
			var list = this;
			$.each(data, function(index, itemData) {
				/*var option = new Option(itemData, index);*/
				var option = new Option(itemData, index);

				list.add(option);
			});
		});
	};

	$(function() {

		clientNamesId = jQuery.getJSON("getProductsIdNames.html",
				function(data) {

					$("#comboProducts").addItems(" ");
					$("#comboProducts").addItems(data);
				});

	});

	$("#comboProducts").change(function() {

		if ($(this).val() == 0) {
			$("#formProduct").find(':input').not(':submit').each(function() {
				$(this).val(" ");

			});
		} else {

			jQuery.getJSON("getProduct.html", {
				dni : $(this).val()
			}, function(data) {
				$("#productName").val(data.name);
				$("#productPVP").val(data.pvp);
				$("#productPrice").val(data.price);
				$("#productDescription").val(data.description);

			});
		}

	});
</script>


</head>

<body>

	<div id="divProducts">

		<div class="divTable">
			<div class="divRow">
				<div class="divCellTag">
					<label for="comboProducts"><fmt:message
							key="generic.products" /></label>
				</div>
				<div class="divCell">
					<select id="comboProducts" class="comboProducts"></select>
				</div>
			</div>
		</div>
	</div>
	<form id="formProduct" method="POST" modelAttribute="newProduct"
		action="productForm.do">

		<div class="divTable">
			<div class="divRow">
				<div class="divCellTag">
					<fmt:message key="generic.name" />
				</div>
				<div class="divCell">
					<input id="productName" name="name" type="text" class="required"
						minlength="2" />
				</div>
			</div>
			<div class="divRow">
				<div class="divCellTag">
					<fmt:message key="generic.unitPrice" />
				</div>
				<div class="divCell">
					<input id="productPrice" name="price" type="number"
						class="required" />
				</div>
			</div>
			<div class="divRow">
				<div class="divCellTag">
					<fmt:message key="generic.pvp" />
				</div>
				<div class="divCell">
					<input id="productPVP" name="pvp" type="number" class="required" />
				</div>
			</div>
			<div class="divRow">
				<div class="divCellTag">
					<fmt:message key="generic.description" />
				</div>
				<div class="divCell">
					<input id="productDescription" name="description" type="text" />
				</div>
			</div>

			<div class="divRow">
				<div class="divCell">
					<button type="submit" name="method" value="save">
						<fmt:message key="generic.save" />
					</button>
				</div>
			</div>
			<button type="submit" class="cancel" name="method" value="delete">
				<fmt:message key="generic.delete" />
			</button>
		</div>

		</div>
		</div>
	</form>

</body>
</html>